<template>
  <div class="member-order">
    <!-- 普通用法 -->
    <XtxTabs v-model="activeName" @tab-click="handleClick">
      <XtxTabsPanel name="all" label="全部订单">全部订单</XtxTabsPanel>
      <XtxTabsPanel name="unpay" label="待付款">待付款</XtxTabsPanel>
      <XtxTabsPanel name="deliver" label="待发货">待发货</XtxTabsPanel>
      <XtxTabsPanel name="receive" label="待收货">待收货</XtxTabsPanel>
      <XtxTabsPanel name="comment" label="待评价">待评价</XtxTabsPanel>
      <XtxTabsPanel name="complete" label="已完成">已完成</XtxTabsPanel>
      <XtxTabsPanel name="cancel" label="已取消">已取消</XtxTabsPanel>
    </XtxTabs>
    <!-- v-for 用法 -->
    <XtxTabs v-model="activeName" @tab-click="handleClick">
      <XtxTabsPanel
        v-for="item in orderStatus"
        :key="item.name"
        :name="item.name"
        :label="item.label"
      >
        {{ item.name }} 的内容
      </XtxTabsPanel>
    </XtxTabs>
  </div>
</template>

<script>
import { orderStatus } from '@/api/constants'
import { ref } from 'vue'
export default {
  name: 'MemberOrder',
  setup () {
    // 默认高亮的选项卡
    const activeName = ref('all')
    // 点击选项卡触发的自定义事件处理函数
    const handleClick = (val) => {
      console.log('父组件接收', val)
    }
    return { activeName, handleClick, orderStatus }
  }
}
</script>

<style scoped lang="less">
</style>
